<template>
  <div id="header">
    <div class="logo" @click="$router.push('/home')">
      <img src="@/assets/happy.png" alt="" />
    </div>
    <div class="inputBox">
      <p @click="searchClick"><van-icon name="search" class="iconSearch"/></p>
    </div>
    <div class="right">
      <img :src="user_img" alt="" v-if="user_img"  @click="$router.push('/userinfo')">
      <img src="@/assets/initialHead.jpeg" alt="" v-else  @click="$router.push('/userinfo')"/>
      <div @click="downloadClick">下载APP</div>
    </div>
  </div>
</template>

<script>
export default {
  props:["user_img"],
  methods:{
    downloadClick(){
      this.$toast.fail('APP尚未开发!');
    },
    searchClick(){
      this.$toast.fail('搜索功能尚未开放!')
    }
  }
};
</script>

<style lang="less" scoped>
#header {
  height: 12.5vw;
  background-color: white;
  display: flex;
  .logo {
    width: 22.222vw;
    box-sizing: border-box;
    padding: 0 1.389vw;
    img {
      width: 22.222vw;
      height: 11.111vw;
    }
  }
  .inputBox{
    flex: 1;
    padding: 0 2.778vw 0 1.389vw;
    p{
      height: 6.944vw;
      width: 100%;
      margin: 2.778vw 0;
      line-height: 6.944vw;
      border: none;
      background-color: #f4f4f4;
      border-radius: 3.472vw;
      .iconSearch{
        margin: 1.667vw 2.778vw;
      }
    }
  }
  .right{
    display: flex;
    img{
      width: 8.333vw;
      height: 8.333vw;
      padding: 2.083vw 0;
      border-radius: 50%;
    }
    div{
      background-color: skyblue;
      width: 22.222vw;
      height: 8.333vw;
      border-radius: 0.556vw;
      margin: 2.083vw 2.778vw;
      font-size: 4.167vw;
      text-align: center;
      line-height: 8.889vw;
      color: white;
    }
  }
}
</style>
